<template>
	
	<view class="page">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false" backTitle=" ">
		  <view class="" >
		    <text class="tn-text-lg">会员特权</text>
		  </view>
		</tn-nav-bar>
		<view class="advantage">
			<view class="advantage-item" v-for="(v,k) in advantages" :key="k">
				<view class="advantage-item-icon tn-icon-home-love-fill tn-color-red"></view>
				<text>{{v.name}}</text>
			</view>
		</view>
		<view class="option">
			<view class="option-item" v-for="(v, k) in options" :key="k">
				<view>
					<view class="option-item-time">
						<text>{{v.name}}</text>
						<text>({{v.desc}})</text>
					</view>
					<view class="option-item-price">
						<text>￥{{v.price+10}}</text>
						<text>￥{{v.price}}</text>
						<view class="option-item-price-line"></view>
					</view>
				</view>
				<view class="option-item-button" @click="pay(v)">
					开通
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import request from '@/common/request.js'
	export default {
		mixins: [template_page_mixin],
		data() {
			return {
				advantages: [
					{icon: '/static/img2/face-default.png', name: '不限喜欢人数'},
					{icon: '/static/img2/face-default.png', name: '不限聊天次数'},
					{icon: '/static/img2/face-default.png', name: '尊贵身份标识'},
					{icon: '/static/img2/face-default.png', name: '优先匹配异性'}
				],
				options: []
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				request.get("friend/wx/pay/goodsList").then(res=>{
					let _data = res[1]['data']
					
					if(_data.code == 20000){
						this.options = _data.data
					}
				})
			},
			pay(v){
				let _t = this
				request.post("friend/wx/pay/createNative",{id:v.id}).then(res=>{
					let _data = res[1]['data']
					if(_data.code == 20000){
						uni.requestPayment({
						    provider: 'wxpay',
							timeStamp:String(_data.data.timeStamp),
							nonceStr: _data.data.nonceStr,
							package: 'prepay_id='+_data.data.prepayId,
							signType: 'MD5',
							paySign: _data.data.paySign,
							success: function (res) {
								
								uni.showModal({
									content:"支付成功",
									complete() {
										// 设置会员为vip
										let user = uni.getStorageSync("userInfo");
										user.ifVip = 1
										uni.setStorageSync("userInfo", user)
										_t.goBack()
									}
								})
							},
							fail: function (err) {
								uni.showToast({
									title:"支付失败"
								})
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F4F4F4;
	}
	
	.page{
		.advantage{
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			width: 700rpx;
			margin: 20rpx auto;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 15rpx;
			margin-top:calc(160rpx + env(safe-area-inset-bottom) / 2);
			
			.advantage-title{
				width: 700rpx;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				color: #666;
			}
			
			.advantage-item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 330rpx;
				height: 170rpx;
				
				.advantage-item-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					border: 1px solid #f5984a;
					margin-bottom: 10rpx;
					
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				
				text{
					font-size: 14px;
					color: #444;
				}
			}
		}
		
		.option{
			width: 700rpx;
			margin: auto;
			
			.option-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 700rpx;
				height: 180rpx;
				background: #fff;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 30rpx;
				margin-bottom: 20rpx;
				
				.option-item-button{
					background: #f5984a;
					height: 70rpx;
					width: 160rpx;
					border-radius: 40rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
					font-size: 16px;
					
					&:active{
						background: #ca7c3d;
					}
				}
				
				.option-item-time{
					margin-bottom: 6rpx;
					
					text{
						&:nth-child(1){
							font-weight: bold;
						}
						
						&:nth-child(2){
							font-size: 14px;
							color: #777;
						}
					}
				}
				
				.option-item-price{
					position: relative;
					
					text{
						&:nth-child(1){
							font-size: 14px;
							color: #777;
						}
						
						&:nth-child(2){
							font-size: 24px;
							color: #f5984a;
						}
					}
					
					.option-item-price-line{
						position: absolute;
						left: 0;
						bottom: 10px;
						width: 32px;
						height: 1px;
						background: #999;
					}
				}
			}
		}
		
	}
	
	.tn-message-fixed{
	  position: fixed;
	  background-color: rgba(255,255,255,1);
	  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	  top: 0;
	  width: 100%;
	  transition: all 0.25s ease-out;
	  z-index: 100;
	}
	.template-mine {
	  max-height: 100vh;
	}
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}
</style>